<html>

	<head>
		<meta charset="utf-8">
		<title>中国地图</title>
	</head>
	<style>
	.line{
		/*fill: none;
		 stroke-linejoin: round;*/
			stroke:linear-gradient(to bottom, blue, yellow)
	}
.Tooltip {
				position: absolute;
				width: 120;
				height: auto;
				font-family: simsun;
				font-size: 14px;
				text-align: center;
				border-style: solid;
				border-width: 1px;
				background-color: white;
				border-radius: 5px;
			}
	</style>

	<body>
		<script src="js/d3.js"></script>
		<script>
			var width = 1000;
			var height = 1000;
var div = d3.select("body").append("div")
				.attr({
					"class":"Tooltip",
					"left": 0,
					"top": height._height,
				})
				.style({
								"opacity": 0
							})
				
			var svg = d3.select("body").append("svg")
				.attr("width", width)
				.attr("height", height)
				.append("g")
				.attr("transform", "translate(0,0)");

			var projection = d3.geo.mercator()
				.center([107, 31])
				.scale(850)
				.translate([width / 2, height / 2]);

			var path = d3.geo.path()
				.projection(projection);

			var color = d3.scale.category20();

			d3.json("data/china.json", function(error, root) {

				if(error)
					return console.error(error);
				console.log(root.features);
				svg.selectAll("path")
					.data(root.features)
					.enter()
					.append("path")
					.attr("stroke", "#878787")
					.attr("stroke-width", 1)
					.attr("fill", function(d, i) {
						return "white" //color(i);
					})
					//			.attr("fill-opacity",0.5)
					.attr("d", function(d) {
						return path(d);
					})
					.on("mouseover", function(d, i) {
						d3.select(this)
							.attr("fill", "yellow");
							console.log(d.properties.name);
							ShowDiv(d.properties.name)
							
							
					})
					.on("mouseout", function(d, i) {
						d3.select(this)
							.attr("fill", "white");
							div.style("opacity",0)
					});
				d3.selectAll("svg").selectAll("circle")
					.data(root.features)
					.enter()
					.append("circle")
					.attr({
						//          	"rx":function (d) {
						//          		console.log(d.properties.cp);
						//          		console.log(projection(d.properties.cp));
						//          	    return projection(d.properties.cp)[0]
						//          	},
						//          	"ry":function (d) {
						////          		console.log(projection(d.properties.cp[1]));
						//          	    return projection(d.properties.cp)[1]
						//          	},
						"transform": function(d) {
							return "translate(" + projection(d.properties.cp)[0] + "," + projection(d.properties.cp)[1] + ")";
						},
						"r": 3,
						"fill": "blue",
						"fill-opacity": 0.4,
						"stroke": "#323232",
						"stroke-width": "1px"
					})
//					.on("mouseover", function(d, i) {
//						console.log(d);
//						d3.select(this)
//							.attr("fill", "yellow");
//							console.log(d.properties.name);
//							
//					})
//					.on("mouseout", function(d, i) {
//						d3.select(this)
//							.attr("fill", "white");
//					});;

			});
			
			var lineargradient =  svg.append("defs").append("linearGradient")
			.attr({
				"id":"linear",
//				"x1":"0%",
//				"x2":"100%",
//				"y1":"0%",
//				"y2":"100%"
			})
			lineargradient.append("stop")
			.attr({
				"offset":"0%",
				"stop-color":"blue"
			})
			lineargradient.append("stop")
			.attr({
				"offset":"100%",
				"stop-color":"yellow"
			})
						var lineargradient2 =  svg.append("defs").append("linearGradient")
			.attr({
				"id":"linear2",
				"x1":"100%",
				"x2":"0%",
				"y1":"0%",
				"y2":"0%"
			})
			lineargradient2.append("stop")
			.attr({
				"offset":"0%",
				"stop-color":"blue"
			})
			lineargradient2.append("stop")
			.attr({
				"offset":"100%",
				"stop-color":"yellow"
			})
			var line = d3.svg.line()
				.x(function(d,i) {
					return projection(d)[0]
				})
				.y(function(d,i) {
					return projection(d)[1];
				})
//				.interpolate("cardinal-open");
 .interpolate(function(points) { 
 	var a = points[1][1] - points[0][1];
 	return points.join("C  "+ (points[0][0] + (a > 0 ? 1 : -1 )* 30)+" "+ (points[0][1] + (a > 0 ? 1 : -1 )* 30)+","+ (points[1][0] + (a > 0 ? 1 : -1 )* 30)+" "+ (points[1][1] + (a > 0 ? 1 : -1 )* 30)+" ")}) // custom interpolator
 	
//			var diagonal = d3.svg.diagonal()
//				.source(function (d) {
//					console.log(projection(d[0]));
//				    return projection(d[0])
//				})
//				.target(function (d) {
//console.log(projection(d[1]));
//				    return projection(d[1])
//				})
//				.projection(function(d) {	//转为笛卡尔坐标
//					 var r = d[1], a = (d[0] - 90) / 180 * Math.PI;
//return [r * Math.cos(a), r * Math.sin(a)];
//				});

			var color = d3.scale.category10();
			d3.json("data/sj.json", function(error, jsonData) {
				if(!error) {
					console.log(jsonData);
					
					var data = [];
					jsonData.forEach(function (d,i) {
					    var subarray = [];compare = [];
					    d.value.forEach(function (g,j) {
					        var array = g , str = g.toString(); array.i = 1;
					        j == 0 ? (  subarray.push(array), compare.push(str)):
					        (compare.indexOf(str) == -1 ? ( subarray.push(array) , compare.push(str )  ): 
					        		subarray[compare.indexOf(str)].i ++
					        );
					    })
					    subarray.name = d.name;
					    subarray.weight = d.weight.reduce(function(a, b) {
							return a + b;
						});
					    subarray.weight2 = d.weight2.reduce(function(a, b) {
							return a + b;
						});
					    data.push(subarray)
					})
					console.log(data);
//					var dataa = [];
//					jsonData.map(function(d,i) {
//						var a = [];
////						console.log(d.value.toString());
//						d.value.map(function (d) {
//						var b = [],j,c=[];
//						a.length == 0 ? ( b= d , b.i = 1 ,a.push(b) ) :
//						(
//							a.map(function (g,i) {
//							   if (g[1][0] == d[1][0] ) {
//							   	j = i,c= c && false
//							   } else{
//							   	c = c && true 
//							   } 
//							}),
//							c  ? (b= d , b.i = 1 ,a.push(b)): a[j].i += 1
//							)
//						,
//						c = []
//						}),
//						a.name = d.name;
//						a.weight = d.weight.reduce(function(prev, cur, index, array) {
//							return prev + cur;
//						});
//						a.weight2 = d.weight2.reduce(function(a, b) {
//							return a + b;
//						})
//						dataa.push(a);
//					})
//					console.log(dataa);
					var line_g_updata = d3.selectAll("svg").selectAll(".line_g").data(data);
					var line_g_enter = line_g_updata.enter();
					var line_g_exit = line_g_updata.exit();
					line_g_enter
						.append("g")
						.attr({
							"class": "line_g",
							"transform": "translate(0,0)"
						})
						.selectAll(".line").data(function (d,i) {
						    return d;
						})
						.enter()
						.append("path")
						.attr({
							"class": "line",
								"d": function(d,i) {
									 return /*diagonal(d)//*/line.tension(0.6)(d);
								},
								"fill-opacity":0,
								"stroke-opacity":0.8,
								"stroke":function (d) {
								    console.log(d);
								    	var a = d[0][0] - d[1][0];
								    	return a <0 ? "url(#linear)" :"url(#linear2)" 
								},
////								return color(d[0][0]) 
//return linear-gradient("to bottom", "blue", "yellow")
//								},
								"stroke-width": function (d) {

								    return d.i;
								},
								"transform":function(d) {
//							return "translate(" + projection(d[0])[0] + "," + projection(d[0])[1] + ")";
						}
								
						})
						.style({
							"fill":"none",
							"stroke-linejoin": "round"
						})
						var dsvg = div.append("svg").attr({
							"class":"dsvg"
						})
						
						ShowDiv = function (name) {
						    var data2 ;
						    var i = 0, d = data[i] ;
						    for(var a in data){
						    	data[a].name == name && (console.log("youla"),data2 = data[a] ) 
						    }
						    console.log(data2);
						    data2 != undefined && (
//title = dsvg.selectAll(".title").data([data2]),
//title_enter = title.enter(),
//title_exit = title.exit(),
//title.text(function (d) {
//  return d.name;
//}),
//title_enter.append("text")
//.attr("class","title")
//.attr("y","14px")
//.text(function (d) {
//	console.log("aaaaaaaaaaaa",d.name);
//  return d.name;
//}),
//title_exit.remove(),

div.html("省:" + data2.name + "<br />" + "来:" + data2.weight + "<br />" + "往:" + data2.weight2)
									.style("left", (d3.event.pageX) + "px")
									.style("top", (d3.event.pageY + 20) + "px")
									.style("opacity", 1.0)
)
						}
						
				} else {
					console.log(error);
				}
			});
			
			
			
			!function () {
			    var a =1;
			    var test = {"a":"a","fangfa":function () {
			        return console.log("fangfa");
			    }};
			    test.go = t;
			    function t() {
			       return console.log("aaa");
			    }
			this.test = test;
			}()
//			console.log(test,test);
			!function () {
			    var b =2;
			    var test2 = {"b":"b"};
			    test2.go = t;
			    function t() {
			        return console.log("BBB");
			    }
			    this.test2 = test2;
			}()
//			console.log(test,test);
			test.go();test2.go();
			test.fangfa();
			
		
		
		//  ========== 
		//  = Ceshi = 
		//  ========== 
		/*
		 * 创建对象         var ceshi = Ceshi.createNew();
		 * 设置labelid        ceshi.Labelid("a");
		 * 创建SVG            ceshi.CreateSvg();
		 * 绘制                   ceshi.Draw();
		 * 
		 * 未来：
		 *      ===;
		 * */
		! function() {
		    var Ceshi = Object.create(Object);
		    Object.defineProperties(Ceshi, {
		    	"CreateNew" : {
		    		"value" : function (){
		    		return FCreateNew();
		    	}
		    	}
		    });
		
		    function FCreateNew() {
		        var ceshi = Object.create(Ceshi);
		        ceshi = {
		        	"_labelid":"",
		        	"Labelid" : function (v){
		    			this.Fangfa(v,"_labelid")
		    		return this;
		    		},
		    		"Fangfa":function (value,name) {
					    this[name] = value;
					    return this;
					}
		       }
		        //定义_width的属性
		        ceshi._width;
		        console.log(ceshi,"a");
		        //定义设置_width属性的方法
		        Object.defineProperties(ceshi, {
		    	"Width" : {
		    		"value" : function (v){
		    			this._width = v
		    		return this;
		    	}
		    	}
		    });
		    	//定义_data的属性
		        ceshi._data;
		        //定义设置_data属性的方法
		        Object.defineProperties(ceshi, {
		    	"Data" : {
		    		"value" : function (v){
		    			this._data = v
		    		return this;
		    	}
		    	}
		    });
		        //定义创建svg方法
		        Object.defineProperties(ceshi,  {
		        	"CreateSvg" : {
		            value: function() {
		                CreateSvg_ceshi(this);
		                return this;
		            }
		           }
		        });
		        //定义设置Draw方法
		         Object.defineProperties(ceshi,  {
		        	"Draw" : {
		            value: function() {
		                Draw_ceshi(this);
		                return this;
		            }
		           }
		        });
		
		        CreateSvg_ceshi = function(ceshi) {
		                //createSvg之前先判断ceshi各属性
		                DetermineProperties_ceshi(ceshi);
		                ceshi.svg = d3.select("#"+ceshi._labelid)
		                .append("svg")
		                .style("background","red")
		                .attr("id", ceshi._svgid)
		//              .attr("preserveAspectRatio", "xMidYMid meet")
		//              .attr("viewBox", "0 0 " + ceshi._width + " " + ceshi._height + " ");
		                .attr("width",ceshi._width)
		                .attr("height",ceshi._height);
		                
		            }
		        draw_ceshi = function(ceshi){
		        		Tool_ceshi(ceshi);
		        		DataPretreatment_ceshi(ceshi);
		        }
		        Tool_ceshi = function(ceshi){
		        	
		        }
		        DataPretreatment_ceshi = function(ceshi){
		        	
		        }
		            //  ========== 
		            //  = 判断属性 = 
		            //  ========== 
		        Detect_function_ceshi = function(object_lh) {
		            return typeof(object_lh) == "undefined";
		        }
		        DetermineProperties_ceshi = function(ceshi) {
		            
		                SetId_ceshi(ceshi);
		            ;
		        }
		        SetId_ceshi = function(ceshi) {
		            ceshi._svgid = ceshi._labelid + "svg";
		            
		        }
		        return ceshi;
		    };
		    this.Ceshi = Ceshi;
		}();
		var c = Ceshi.CreateNew().Labelid("a")
		console.log(c._labelid);
		var cc = Ceshi.CreateNew().Labelid("ac")
		console.log(cc._labelid);
		
		//  ========== 
		//  = P = 
		//  ========== 
		/*
		 * 创建对象         var p = P.createNew();
		 * 设置labelid        p.Labelid("a");
		 * 创建SVG            p.CreateSvg();
		 * 绘制                   p.Draw();
		 * 
		 * 未来：
		 *      ===;
		 * */
		! function() {
		    var P = Object.create(Object);
		    P = {
		    	"CreateNew":function () {
		    	    return FCreateNew();
		    	}
		    }
		    
		    function FCreateNew() {
		        var p = Object.create(P);
		        p = {
		        	"_labelid":"",
		        	"Labelid" : function (v){
		    			this.Fangfa(v,"_labelid")
		    		return this;
		    		},
		    		"Fangfa":function (value,name) {
					    this[name] = value;
					    return this;
					}
		       }
		        //定义_width的属性
		        p._width;
		        //定义设置_width属性的方法
		        Object.defineProperties(p, {
		    	"Width" : {
		    		"value" : function (v){
		    			this._width = v
		    		return this;
		    	}
		    	}
		    });
		    	//定义_data的属性
		        p._data;
		        //定义设置_data属性的方法
		        Object.defineProperties(p, {
		    	"Data" : {
		    		"value" : function (v){
		    			this._data = v
		    		return this;
		    	}
		    	}
		    });
		        //定义创建svg方法
		        Object.defineProperties(p,  {
		        	"CreateSvg" : {
		            value: function() {
		                CreateSvg_p(this);
		                return this;
		            }
		           }
		        });
		        //定义设置Draw方法
		         Object.defineProperties(p,  {
		        	"Draw" : {
		            value: function() {
		                Draw_p(this);
		                return this;
		            }
		           }
		        });
		
		        CreateSvg_p = function(p) {
		                //createSvg之前先判断p各属性
		                DetermineProperties_p(p);
		                p.svg = d3.select("#"+p._labelid)
		                .append("svg")
		                .style("background","red")
		                .attr("id", p._svgid)
		//              .attr("preserveAspectRatio", "xMidYMid meet")
		//              .attr("viewBox", "0 0 " + p._width + " " + p._height + " ");
		                .attr("width",p._width)
		                .attr("height",p._height);
		                
		            }
		        draw_p = function(p){
		        		Tool_p(p);
		        		DataPretreatment_p(p);
		        }
		        Tool_p = function(p){
		        	
		        }
		        DataPretreatment_p = function(p){
		        	
		        }
		            //  ========== 
		            //  = 判断属性 = 
		            //  ========== 
		        Detect_function_p = function(object_lh) {
		            return typeof(object_lh) == "undefined";
		        }
		        DetermineProperties_p = function(p) {
		            
		                SetId_p(p);
		            ;
		        }
		        SetId_p = function(p) {
		            p._svgid = p._labelid + "svg";
		            
		        }
		        return p;
		    };
		    this.P = P;
		}();
		var p = P.CreateNew().Labelid("p").Data([1,2]);
		console.log("1_________",p.Data,p.Labelid);
		p._data = [2,3];
		p.Data = function () {
		    console.log("ddd");
		}
		console.log("2_________",p.Data,p.Labelid);
		p._labelid = "ppp";
		p.Labelid = function () {
		    console.log("aaa");
		}
		console.log("3_________",p.Data,p.Labelid);
		var cat = {
"weight" : "10",
"eat" : function(v){
	return console.log("猫吃"+v);
	}
}
		console.log(cat);
		var cat2 = {"_weight":"","_labelid":""};
		Object.defineProperties(cat2, {
			"Weight" : {
				"writable":true,
				"value" : function (v){
				this._weight = v
				return this;
				}
			},
			"Labelid":{
				"value": function (v) {
				    this._labelid = v;
				    return this;
				    
				}
			}
		});
		console.log(cat2);
		cat2.Weight = function () {
		    console.log("_______________a");
		}
		console.log(cat2,cat2.Weight());
		
		//  ========== 
		//  = A = 
		//  ========== 
		/*
		 * 创建对象         var a = A.createNew();
		 * 设置labelid        a.Labelid("a");
		 * 创建SVG            a.CreateSvg();
		 * 绘制                   a.Draw();
		 * 
		 * 未来：
		 *      ===;
		 * */
		! function() {
		    var A = Object.create(Object);
		    A = {
		    	"CreateNew":function () {
		    	    return FCreateNew();
		    	}
		    }
		    
		    function FCreateNew() {
		        var a = Object.create(A);
		        a = {
		        	"_labelid":"",
		        	"Labelid" : function (v){
		    			this.Fangfa(v,"_labelid")
		    		return this;
		    		},
		    		"Fangfa":function (value,name) {
					    this[name] = value;
					    return this;
					}
		       }
		        //定义_width的属性
		        a._width;
		        //定义设置_width属性的方法
		        Object.defineProperties(a, {
		    	"Width" : {
		    		"value" : function (v){
		    			this._width = v
		    		return this;
		    	}
		    	}
		    });
		    	//定义_data的属性
		        a._data;
		        //定义设置_data属性的方法
		        Object.defineProperties(a, {
		    	"Data" : {
		    		"value" : function (v){
		    			this._data = v
		    		return this;
		    	}
		    	}
		    });
		       //定义设置Draw方法
		         Object.defineProperties(a,  {
		        	"Draw" : {
		            value: function() {
		                Tool();
		                return this;
		            }
		           }
		        });
		        a.Draw();
		       function Tool(){
		        	console.log("a");
		        }
		        
		        return a;
		    };
		    this.A = A;
		}();
		
		//  ========== 
		//  = B = 
		//  ========== 
		/*
		 * 创建对象         var b = B.createNew();
		 * 设置labelid        b.Labelid("a");
		 * 创建SVG            b.CreateSvg();
		 * 绘制                   b.Draw();
		 * 
		 * 未来：
		 *      ===;
		 * */
		! function() {
		    var B = Object.create(Object);
		    B = {
		    	"CreateNew":function () {
		    	    return FCreateNew();
		    	}
		    }
		    
		    function FCreateNew() {
		        var b = Object.create(B);
		        b = {
		        	"_labelid":"",
		        	"Labelid" : function (v){
		    			this.Fangfa(v,"_labelid")
		    		return this;
		    		},
		    		"Fangfa":function (value,name) {
					    this[name] = value;
					    return this;
					}
		       }
		        //定义_width的属性
		        b._width;
		        //定义设置_width属性的方法
		        Object.defineProperties(b, {
		    	"Width" : {
		    		"value" : function (v){
		    			this._width = v
		    		return this;
		    	}
		    	}
		    });
		    	//定义_data的属性
		        b._data;
		        //定义设置_data属性的方法
		        Object.defineProperties(b, {
		    	"Data" : {
		    		"value" : function (v){
		    			this._data = v
		    		return this;
		    	}
		    	}
		    });
		        //定义创建svg方法
		        Object.defineProperties(b,  {
		        	"CreateSvg" : {
		            value: function() {
		                CreateSvg_b(this);
		                return this;
		            }
		           }
		        });
		        //定义设置Draw方法
		         Object.defineProperties(b,  {
		        	"Draw" : {
		            value: function() {
		               Tool();
		                return this;
		            }
		           }
		        });
		
		        CreateSvg_b = function(b) {
		                //createSvg之前先判断b各属性
		                DetermineProperties_b(b);
		                b.svg = d3.select("#"+b._labelid)
		                .append("svg")
		                .style("background","red")
		                .attr("id", b._svgid)
		//              .attr("preserveAspectRatio", "xMidYMid meet")
		//              .attr("viewBox", "0 0 " + b._width + " " + b._height + " ");
		                .attr("width",b._width)
		                .attr("height",b._height);
		                
		            }
		        draw_b = function(b){
		        		Tool_b(b);
		        		DataPretreatment_b(b);
		        }
		         function Tool(b){
		        	console.log("b");
		        }
		      
		        return b;
		    };
		    this.B = B;
		}();
		var a = A.CreateNew();
		var b = B.CreateNew();
		a.Draw();
		b.Draw();
		function ju() {
		    fun = function () {
		    console.log("函数表达式");
		}
		function fun2() {
		    console.log("声明函数");
		} 
		}
		ju();
		console.log("*******定义前*********");
		fun();
		fun2();
		console.log("*******定义前*********");
		</script>

	</body>

</html>